<template>
  <div class="container">
    <van-sticky>
    <div class="heads">
      <div class="search">
        <div class="search_postion">
          <div @click="selectPosition" style="height: 25px;display: flex;align-items: center"> <img
              src="../assets/index/position.svg" alt="" style="width: 15px;"></div>
          <div @click="selectPosition" style="height: 25px;display: flex;align-items: center">
            <span class="position_text">{{ cityName }}</span>
          </div>
        </div>
        <van-search @click="selectSearch" class="custom-search" v-model="value" placeholder="搜影片、影院" shape="round" />
      </div>
    </div>
    </van-sticky>
    <div class="tabs_search">
      <van-tabs v-model="activeName" animated title-active-color="#EE473B" color="#EE473B"
        title-inactive-color="#5B626A">
        <van-tab name="fileName" title="影院" />
        <van-tab name="hot" title="热映" />
        <van-tab name="soon" title="即将上映" />
      </van-tabs>
    </div>
    <div v-if="activeName == 'fileName'">
      <van-dropdown-menu>
<!--        <van-dropdown-item class="selNone" v-model="value1" :options="option1">-->
<!--&lt;!&ndash;          <van-tree-select :items="cityItems" :active-id.sync="activeId" @click-item="onClickItem"&ndash;&gt;-->
<!--&lt;!&ndash;            @click-nav="onClickNav" :main-active-index.sync="activeIndex" />&ndash;&gt;-->

<!--          <div class="area">-->
<!--            <div v-for="(item,index) in areaList" @click="onClickItem(item)">-->
<!--              <div>{{item.region_name}}</div>-->
<!--              <van-icon size="18" v-if="item.region_id === region_id" color="#ee0a24" name="success" />-->
<!--            </div>-->
<!--          </div>-->
<!--        </van-dropdown-item>-->
        <van-dropdown-item v-model="value1" :options="option1" @change="onClickItem" />
        <van-dropdown-item v-model="value2" :options="option2" @change="changeValue2" />
        <van-dropdown-item v-model="value3" :options="option3" @change="changeValue3" />
      </van-dropdown-menu>
    </div>
    <hotFilm v-if="activeName == 'hot'"></hotFilm>
    <soonFilms v-if="activeName == 'soon'"></soonFilms>
    <movieTheater :value2="value2" :value3="value3" :region_id="region_id" v-if="activeName == 'fileName'">
    </movieTheater>
  </div>
</template>
<script>
import plantAPI from "@/api/plant";

import soonFilms from '@/components/soonFilms.vue'
import movieTheater from '@/components/movieTheater.vue'
import hotFilm from '@/components/hotFilm.vue'
export default {
  components: { hotFilm, soonFilms, movieTheater },
  created() {
    this.cityName = localStorage.getItem("cityName");
    this.cityId = localStorage.getItem("city_id");
    let status = this.$route.query.status
    this.activeName = status ? status == 1 ? 'hot' : 'soon' : 'fileName'
    plantAPI.getregionAPI(this.cityId).then(res => {
      this.areaList = JSON.parse(res.data.body).data;
      const option = []
      this.areaList.forEach(item=>{
        option.push({
          text:item.region_name,
          value:item.region_id
        })
      })
      option.unshift({
        text: '区域', value: 'a'
      })
      this.option1 = [...option]
    })
  },
  methods: {
    selectPosition() {
      this.$router.push({
        path: '/citySelect',
        query: {
          nowCity: this.cityName,
        }
      })
    },
    selectSearch() {
      this.$router.push({
        name: 'pageSearch'
      })
    },
    changeValue2(value) {
      this.value2 = value
    },
    changeValue3(value) {
      this.value3 = value
    },
    onClickItem(value) {
      this.region_id = value
      this.value1 = value;
    },
    onClickNav(index) {
      plantAPI.getregionAPI(this.cityList[index].city_id).then(res => {
        this.cityList[index].children = JSON.parse(res.data.body).data;
        this.cityItems = [];
        this.cityList.map((item) => {
          let child = []
          if (item.children) {
            item.children.map(i => {
              child.push({
                text: i.region_name,
                id: i.region_id
              })
            })
          }

          let obj = {
            text: item.city_name,
            children: child
          }
          this.cityItems.push(obj)
        })
      })
    }

  },
  data() {
    return {
      cityId:'',
      cityName: '',
      region_id: '',
      activeId: 1,
      activeIndex: 0,
      cityList: [],
      areaList: [],
      cityItems: [],
      value: '',
      value1: 'a',
      value2: 'a',
      value3: 'c',
      option1: [
        { text: '区域', value: 'a' }
      ],
      option3: [
        { text: '退票', value: 'c' },
        { text: '可退票', value: 'a' },
        { text: '不可退', value: 'b' },
      ],
      option2: [
        { text: '距离', value: 'a' },
        { text: '由近到远', value: 'b' }
      ],
      activeName: 'fileName'
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .van-dropdown-menu{
  position: relative;
}
::v-deep .van-popup{
  max-height: 300px;
}
.selNone {
  position: absolute;
  top: 55px;
  ::v-deep .van-dropdown-item__option {
    display: none;
  }
  .area{
    width: 100%;
    height: 200px;
    background: #FFFFFF;
    overflow-y: auto;


    >div{
      width: 100%;
      border-bottom: 1px solid  #d7d5d5;
      display: flex;
      justify-content: space-between;
      padding: 10px 20px 10px 20px;
      box-sizing: border-box;
      >div:nth-child(1){
        width: calc(100% - 50px);
        color: #424242;
        font-size: 14px;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
::v-deep .van-sticky{
  background: #FFFFFF;
}
.container {
  background: #F5F6F8;
  min-height: calc(100vh - 95px);
  /* 确保容器撑满整个视口 */
  padding-bottom: 95px;
}


.van-tabs {
  width: 210px;
}

.van-tab__text {
  font-family: PingFang SC;
  font-size: 13px;
  color: #5B626A;
}

::v-deep .van-icon-search{
  color: #EE473B;
}
//.search {
//  display: flex;
//  align-items: center;
//  line-height: 44px;
//  height: 44px;
//  //padding-top: 10px;
//  margin-left: 17px;
//
//  .search_postion {
//    display: flex;
//    align-items: center;
//    margin-right: 8px;
//    height: 25px;
//    line-height: 25px;
//
//    .position_text {
//      font-family: PingFang SC;
//      font-weight: 400;
//      font-size: 16px;
//      color: #000;
//      margin: 0 3px;
//    }
//  }
//
//  .van-search {
//    width: 155px;
//    height: 29px;
//    background: none;
//    padding: 0;
//    margin: 0;
//  }
//}
</style>
